@function rem($px) {
  @return $px / 100 + rem;
}
$main-color: #7f2974;
$c99: #999999;
$c66: #666666;
$cff: #ffffff;
.fr {
  float: right;
}
.fl {
  float: left;
}
html{
  font-size: 83px;
}
body {
  padding-top: rem(150);
}
img {
  max-width: 100%;
}
.top-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: $cff;
  .top-tips-nav {
    max-width: rem(1366);
    padding: 0 rem(160);
    line-height: rem(38);
    width: rem(1366);
    box-sizing: border-box;
    margin: 0 auto;
    .hello-text {
      color: $main-color;
      font-size: rem(14);
      font-weight: 500;
      letter-spacing: rem(1.2);
    }
    .tip-nav {
      background-color: #fff;
      padding: 0;
      .layui-nav-bar {
        background-color: transparent;
      }
      .layui-nav-item {
        line-height: inherit;
        a {
          color: $c99;
          font-size: inherit;
          font-size: inherit;
          padding: 0;
          margin-right: rem(33);
        }
        &.end-item a {
          margin-right: 0;
        }
      }
    }
  }
  .top-line {
    height: rem(2);
    background-color: $main-color;
    margin: 0;
    padding: 0;
  }
  .top-icon-box {
    width: rem(1366);
    font-size: 0;
    max-width: rem(1366);
    margin: 0 auto;
    padding: rem(10) 0 0 rem(169);
    box-sizing: border-box;
    .box-style {
      display: inline-block;
      color: $c66;
      font-size: 0;
      ul {
        display: inline-block;
        vertical-align: middle;
        li {
          font-family: PingFangSC-Regular;
          font-size: rem(14);
        }
      }
    }
    .tel-info-box {
      img {
        display: inline-block;
        width: rem(45);
        height: rem(32);
        margin-right: rem(10);
        vertical-align: middle;
      }
    }
  }
  .logo {
    width: rem(50);
    height: rem(50);
    display: inline-block;
    margin-left: rem(238);
    margin-right: rem(304);
  }
  .local-info-box {
    img {
      width: rem(34);
      height: rem(40);
      margin-right: rem(10);
    }
  }
  .nav-box {
    max-width: rem(1366);
    margin: 0 auto;
    color: #303030;
    background-color: $cff;
    padding: 0 rem(170);
    .layui-nav-bar {
      background-color: transparent;
    }
    .layui-nav-item {
      line-height: rem(50);
      &.active a {
        color: $main-color;
      }
      a {
        color: initial;
        font-size: rem(18);
        padding: 0;
        margin-right: rem(93);
      }
      &.end-item a {
        margin-right: 0;
      }
    }
  }
}

.layui-carousel-ind{
  top:rem(-52);
}
.layui-carousel[lay-arrow=hover] .layui-carousel-arrow {
  left: rem(50);
  margin-top: rem(-55);
}
.layui-carousel-arrow[lay-type=add]{
  right:rem(50);
  background: url('../images/arow-right.png') 0 0 no-repeat;
  background-size: contain;
}
.layui-carousel[lay-arrow=hover] .layui-carousel-arrow[lay-type=add]{
  right:rem(50);
  background: url('../images/arow-right.png') 0 0 no-repeat;
  background-size: contain;
}
.layui-carousel-ind li.layui-this{
  background-color: $main-color
}
.layui-carousel-ind ul,.layui-carousel-ind ul:hover{
  background-color: transparent;
}
.layui-carousel-ind li{
  margin: 0 rem(7);
  width: rem(16);
  height: rem(16);
  background-color: #dedede;
}
.container{
  max-width: rem(1366);
  margin: 0 auto;
  // 栏目标题文字信息
  .project-title-new{
    text-align: center;
    margin: 0 auto;
    width:rem(400);
    height: rem(80);
    position: relative;
    border:1px solid #333;
    .project-title-mintext{
      line-height: rem(60);
      font-size: rem(30);
      color:$main-color;
    }
    .project-title{
      width: rem(240);
      position: absolute;
      left:50%;
      bottom:rem(-27);
      transform: translateX(-50%);
      font-size: rem(50);
      color:#555;
      line-height: 0.47rem;
      &.ff-bg{
        background-color: #fff;
      }
      &.g-bg{
        background-color: #f6f7f8;
      }
    }
  }
}

.carousel-box{
  .layui-carousel-arrow{
    background: url('../images/arow-left.png') 0 0 no-repeat;
    background-size: contain;
    width:rem(52);
    height:rem(110);
    color:transparent;
  }
  div img{
    width: 100%;
    height:100%;
    object-fit: cover;
  }
}
// 培训项目
.project-box{
  background-color: #F6F7F8;
  padding-top: rem(80);
  .project-info{
    border-color: $main-color;
    width: rem(700);
    margin: 0 auto;
    margin-top: rem(75);
    legend{
      padding: 0 rem(40);
      margin-left:rem(207);
      font-size: rem(30);
      color: #333;
    }
  }
  .project-info-box{
    padding: rem(70) rem(186) 0;
    .info-item{
      background-color: $cff;
      padding: rem(75) rem(20) 0;
      width: rem(280);
      height: rem(330);
      text-align: center;
      border: rem(4) solid $main-color;
      margin-right: rem(77);
      position: relative;
      &:last-child{
        margin-right: 0;
      }
      .item-title{
        font-size:rem(28);
        color: $main-color;
      }
      .item-line{
        width: rem(80);
        height:rem(6);
        background-color:#fff;
        margin: 0 auto;
        padding-top: rem(18);
        border-bottom: rem(6) solid $main-color;
      }
      p{
        font-size: rem(17);
        line-height: rem(44);
        padding-top: rem(22);
        color: #555555;
      }
      .nums-text{
        width: rem(55);
        height: rem(65);
        background: url('../images/num-bg.png') 0 0 no-repeat;
        background-size: contain;
        font-size: rem(26);
        color: $cff;
        padding-top: rem(15);
        position: absolute;
        top:rem(-30);
        left:50%;
        transform:translateX(-50%);
      }
    }
  }
  p.info-slogan{
    text-align: center;
    font-size: rem(22);
    color: #333;
    margin: rem(50) auto rem(72);
  }
  .project-content-title{
    border-color: $main-color;
    width: rem(600);
    margin: 0 auto;
    legend{
      padding: 0 rem(25);
      margin-left:rem(187);
      font-size: rem(30);
      color: #333;
    }
  }
  .project-content{
    padding: rem(40) rem(160);
    font-size: 0;
    .content-item{
      padding: rem(10);
      display: inline-block;
      margin-bottom: rem(40);
      background:rgba(248,248,248,1);
      box-shadow:0px rem(6) rem(20) 0px rgba(222,222,222,0.4);
      width: rem(220);
      height: rem(300);
      box-sizing: border-box;
      margin-right: rem(55);
      text-align: center;
      &:nth-child(4),&:nth-child(8){
        margin-right: 0
      }
      img{
        width: rem(200);
        height: rem(200);
      }
      p{
        padding-top: rem(30);
        font-size: rem(24);
        color: #111;
      }
    }
  }
}
// server porject
.server-box{
  padding-top: rem(80);
  padding-bottom: rem(70);
  .server-tab{
    box-sizing: border-box;
    padding: rem(30) rem(64) rem(44);
    margin: rem(85) auto 0;
    width:rem(1046);
    height:rem(524);
    background:rgba(255,255,255,1);
    box-shadow:0px rem(4) rem(16) 0px rgba(222,222,222,0.4);
    .tab-title-box{
      border-bottom-style:none;
      text-align: center;
      height: rem(50);
      li{
        box-sizing: border-box;
        width: rem(170);
        line-height: rem(50);
        border: rem(1) solid #E9709B;
        border-radius: rem(25);
        font-size: rem(22);
        color:#E9709B;
        margin-right: rem(92);
        &.layui-this{
          color: $cff;
          background-color: #E9709B;
        }
        &.layui-this:after{
          border:none;
        }
        &:last-child{
          margin-right: 0
        }
      }
    }
    .layui-tab-content{
      padding: rem(20) 0 0;
    }
    .item-box{
      font-size: 0;
      text-align:center;
      .server-item-info{
        position: relative;
        width: rem(260);
        height: rem(380);
        margin-right: rem(68);
        display: inline-block;
        &:last-child{
          margin-right: 0
        }
        .server-item-blank{
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: rem(140);
          background-color: rgba(0,0,0,.6);
          p.title{
            font-size:rem(20);
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:rem(45);
            text-align: center;
          }
          p.server-info-text{
            padding: 0 rem(20);
            font-size:rem(15);
            font-family:PingFangSC-Regular;
            font-weight:400;
            line-height: rem(30);
            color:rgba(255,255,255,1);
          }
        }
      }
    }
  }
}
// video-box
.video-box{
  padding-top: rem(80);
  padding-bottom: rem(80);
  background-color:#f6f7f8;
  .video-content-box{
    margin: rem(85) auto 0;
    width:rem(1099);
    height:rem(530);
    background:rgba(255,255,255,1);
    box-shadow:0px rem(6) rem(20) 0px rgba(222,222,222,0.4);
    padding: rem(10);
    box-sizing: border-box;
    font-size: 0;
    .video-container{
      width: rem(822);
      height: rem(510);
      display: inline-block;
    }
    .video-list{
      display: inline-block;
      width: rem(240);
      vertical-align: top;
      margin-left: rem(12);
      .video-list-title{
        border-bottom: rem(1) solid $main-color;
        padding-bottom: rem(5);
        box-sizing: border-box;
      }
      .title{
        font-size: rem(20);
        color: #111;
        margin-bottom: rem(5);
      }
      .title-text{
        font-size:rem(16);
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#555;
        line-height:rem(26);
      }
      .video-item-box{
        line-height:rem(30);
        color: #333;
        padding-top: rem(10);
        box-sizing: border-box;
        .video-item{
          font-size: 0;
          margin-bottom: rem(10);
          &.active img{
            border: rem(1) solid #E9709B;
            box-sizing: border-box;
          }
          img{
            object-fit: cover;
            display: inline-block;
            width: rem(152);
            height:rem(88);
            margin-right:rem(8);
          }
          p{
            width: rem(80);
            display: inline-block;
            font-size: rem(16);
            vertical-align: middle;
            color: #333;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
// teacher
.teacher-box{
  padding-top: rem(80);
  .teacher-content{
    margin-top: rem(77);
    font-size: 0;
    text-align: center;
    padding-bottom: rem(140);
    .teacher-item{
      width: rem(200);
      height: rem(300);
      margin-right: rem(22);
      position: relative;
      overflow: hidden;
      display: inline-block;
      &:hover  .teacher-info{
        top:0;
      }
      &:nth-of-type(even){
        position: relative;
        top:rem(70);
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      &:last-child{
        margin-right: 0;
      }
      .teacher-info{
        position: absolute;
        width: 100%;
        height: 100%;
        top:rem(240);
        left: 0;
        right: 0;
        text-align: center;
        background-color: rgba(0,0,0,.6);
        .t-name{
          font-size:rem(22);
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          padding: rem(20) 0 rem(18);
        }
        .t-text{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 6;
          font-size: rem(16);
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: white;
          padding: 0 rem(14);
          margin-bottom:rem(30);
          text-align: left;
          height: 117px;
          overflow: hidden;
        }
        .t-btn{
          width:rem(120);
          line-height:rem(32);
          border:rem(1) solid rgba(255,255,255,1);
          border-radius:rem(16);
          color: #fff;
          font-size: rem(16);
          margin: 0 auto;
          cursor: pointer;
          transition: all .5s;
          &:hover{
            background-color:#fff;
            color:#333;
            transition: all .5s;
          }
        }
      }
    }
  }
}
// student -box 
.student-box{
  padding-top: rem(80);
  padding-bottom: rem(50);
  background-color: #f6f7f8;
  .student-content{
    font-size: 0;
    text-align: center;
    margin-top: rem(238);
    .student-item{
      cursor: default;
      box-shadow: 0px rem(-4) rem(20) 0px rgba(239,239,239,0.6), 0px rem(4) rem(10) 0px rgba(222,222,222,0.8);
      height: rem(170);
      width: rem(230);
      margin-right: rem(20);
      display: inline-block;
      background-color: #F0F0F0;
      padding: rem(7) rem(15) 0;
      box-sizing: border-box;
      position: relative;
      &:hover .student-card{
        top: -81%;
        transition: all 1s;
      }
      .out-bg{
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 3;
        background: url('../images/user-bg2.png') bottom no-repeat;
        background-size: contain;
        width: rem(230);
        height: rem(109);
        padding-top: rem(56);
        box-sizing: border-box;
        p{
          color: $main-color;
          font-size: rem(20);
          text-align: center;
        }
      }
      .student-card{
        box-shadow: 0px rem(4) rem(10) 0px rgba(222,222,222,0.8);
        position: absolute;
        right: rem(15);
        left: rem(15);
        top: rem(7);
        transition: all .5s;
        padding-bottom: rem(40);
        box-sizing: border-box;
        background-color: #f7f7f7;
        .student-head{
          width: rem(65);
          height: rem(65);
          border-radius: 50%;
          border: rem(2) solid #E9709B;
          box-sizing: border-box;
          position: absolute;
          left: 50%;
          top:rem(-40);
          transform: translateX(-50%);
        }
        .student-info{
          padding: rem(48) rem(12) 0;
          box-sizing: border-box;
          text-align: center;
          background-color: #f7f7f7;
          height: auto;
          overflow: hidden;
          .student-name{
            color: #333333;
            font-size: rem(20);
            margin-bottom: rem(14);
          }
          .student-text{
            display: none;
            height: rem(30);
            overflow: hidden;
            font-size: rem(16);
            color: #666;
            .student-money{
              display: block;
              line-height: rem(40);
            }
          }
        }
      }
      &:last-child{
        margin-right: 0;
      }
    }
  }
}
// footer
 footer{
   padding-top: rem(60);
   text-align: center;
   padding-bottom: rem(60);
   .bottom-title{
     margin: 0 auto;
     display: block;
     width: rem(357);
     height: rem(198);
     object-fit: contain;
   }
   p{
     margin: rem(50) auto rem(10);
   }
   p,.bottom-nav span a{
     color: #aaa;
   }
   .layui-breadcrumb a:hover {
    color: $main-color!important;
}
 }
 @media screen and (min-width:1024px) and (max-width:1385px){
    .top-box .nav-box .layui-nav-item a {
        margin-right: 0.88rem;
    }
    .project-box .project-info-box .info-item {
        margin-right: 0.66rem;
    }
    .project-box .project-content .content-item {
        margin-right: 0.48rem;
    }
}